<template>
	<view>
		<!-- 搜索框 -->
		<up-sticky offsetTop="-1">
			<view class="search-box">
				<image src="@/static/logo.png"></image>
				<up-search @click="goSearch" :disabled="true" placeholder="搜索商品" v-model="keyword" :showAction="false"
					bgColor="#ffffff"></up-search>

			</view>
		</up-sticky>
		<!-- 轮播图 -->
		<view class="swiper">
			<up-swiper @click="goCate" :height="swiperHeight" :list="swiperList" indicator indicatorActiveColor="#fff"
				indicatorInactiveColor="#d6d6d6" circular></up-swiper>
		</view>
		<!-- 商品列表 -->
		<view>
			<up-grid :border="false" col="2">
				<up-grid-item v-for="(item,index) in goodsData" :key="index">
					<view class="goods_item" @click="goGoodsDetail(item.goodsId)">
						<image :src="baseUrl+'/'+item.goodsImage" mode="aspectFill"></image>
						<view class="hr"></view>
						<view class="goods_name">{{item.goodsName}}</view>
						<view class="goods_price">￥{{item.goodsSellingPrice}}</view>
					</view>
				</up-grid-item>
			</up-grid>
		</view>
		<view v-show="userInfo.userInfo.id==''">
			<view class="bottom">
				<view class="bottom-text">授权头像等信息,开启购物之旅</view>
				<view class="bottom-btn" @click="showLogin">立即登录</view>
			</view>
			<up-popup :show="show" @close="close" @open="open" :closeable="true">
					<loginVue class="loginVue"></loginVue>
			</up-popup>
		</view>
	</view>
</template>

<script setup>
	import loginVue from '@/component/login/login.vue';
	import {
		computed,
		ref
	} from 'vue';
	import {
		onLoad,
		onHide
	} from "@dcloudio/uni-app"
	import {
		get,
		baseUrl
	} from '/hooks/req.js'
	import {
		useUserStore,
		useCart,
		useUserAddressStore,
	} from '@/store/index';
	const userInfo = useUserStore()
	const userCart = useCart()
	const userAddressInfo = useUserAddressStore()
	//搜索框值
	const keyword = ref('');
	//轮播图数据
	const swiperData = ref([])
	//轮播图数组
	const swiperList = ref([])
	//商品数据
	const goodsData = ref([])
	const show = ref(false)
	const showLogin = () => {
		show.value = true
	}
	const open = () => {
		show.value = true
	}
	const close = () => {
		show.value = false
	}
	//跳转搜索页
	const goSearch = () => {
		uni.navigateTo({
			url: '../search/search'
		})
	}
	//跳转分类页
	const goCate = () => {
		uni.switchTab({
			url: '/pages/cate/cate'
		})
	}
	//跳转商品详情
	const goGoodsDetail = (goodsId) => {
		uni.navigateTo({
			url: '/pages/goodsDetail/goodsDetail?goodsId=' + goodsId
		})
	}
	//轮播图自适应
	const swiperHeight = computed(() => {
		const windowInfo = uni.getWindowInfo()
		return windowInfo.windowWidth / 2023 * 759
	})
	//获取轮播图
	const loadSwiper = () => {
		get(`/swiper/list`).then(result => {
			swiperData.value = result.data.data
			swiperList.value = swiperData.value.map(r => baseUrl + r.imgUrl)
		})
	}
	//获取商品数据
	const loadGoods = () => {
		get(`/goods/list`).then(result => {
			goodsData.value = result.data.data

		})
	}
	onLoad(() => {
		loadSwiper()
		loadGoods()
		if (uni.getStorageSync("user")) {
			userInfo.userInfo = uni.getStorageSync("user")
			userCart.loadShoppingcartList();
			userAddressInfo.loadAddressList();
		}
	})
	onHide(()=>{
		show.value = false;
	})
</script>

<style scoped lang="scss">
	// 搜索框
	.search-box {
		height: 45px;
		width: 100vw;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		padding: 0 5px;
		background-color: #eeeeee;

		image {
			height: 35px;
			width: 35px;
			margin-right: 5px;
		}

		up-search {
			width: 85vw;
		}
	}

	// 商品
	.goods_item {
		width: 74%;
		background-color: #fff;
		border-radius: 5px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		padding: 20px;
		margin-top: 10px;
		display: flex;
		flex-direction: column;

		image {
			width: 100%;
			height: 250rpx;
		}

		.hr {
			height: 1px;
			background-color: #eee;
			margin: 10px 0;
		}

		.goods_name {
			font-size: 16px;
			color: #333;
			margin-right: auto;
		}

		.goods_price {
			font-size: 12px;
			color: #FF6600;
			margin-top: 6px;
			font-weight: bold;
		}
	}


	.bottom {
		height: 50px;
		width: 100vw;
		box-sizing: border-box;
		position: fixed;
		bottom: 0px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 10px;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
		color: white;
		font-size: 16px;
		.bottom-btn {
			background-color: #FF6600;
			color: white;
			width: 100px;
			height: 35px;
			text-align: center;
			border-radius: 20px;
			line-height: 35px;
			margin-left: 10px;
			font-size: 14px;
		}
	}

	:deep(.loginVue) {
		.cart-login {
			height: 50vh;	
		}
	}
</style>